<template>
	<view class="goods-details">
		<navbar title="机构" :background="{background: `rgba(256,256,256,${percent})`}" :titleColor="`rgba(0,0,0,${percent})`" :immersive="true"></navbar>
		<!-- #ifdef H5 -->
		<download-nav v-if="showDownload" :top="44"></download-nav>
		<!-- #endif -->
		<loading-view v-if="isFirstLoading"></loading-view>
		<view class="page-top">
			<view class="page-top-bgc"></view>
			<view class="page-top-container">
				<view class="page-top-main">
					<view class="page-top-logo">
						<image class="icon-share" :src="detailsData.logo"></image>
						<view class="logo-right">
							私立
						</view>
					</view>
					<view class="page-top-title">
						{{ detailsData.name }}
					</view>
					<view class="title-tips">
						<view class="title-tips-item">
							美容医院
						</view>
						<view class="title-tips-item">
							成立13年
						</view>
					</view>
					<view class="profile">
						简介：{{ detailsData.description }}
					</view>
					<view class="information" v-if="false">
						<view class="information-item">
							<view class="information-item-top">
								正常
							</view>
							<view class="information-item-bottom">
								医疗执业资质
							</view>
						</view>
						<view class="information-item">
							<view class="information-item-top">
								正常
							</view>
							<view class="information-item-bottom">
								医疗执业资质
							</view>
						</view>
						<view class="information-item">
							<view class="information-item-top">
								正常
							</view>
							<view class="information-item-bottom">
								医疗执业资质
							</view>
						</view>
					</view>
					<view class="address-name">
						<u-icon name="map" color="rgb(0, 170, 130)" size="28"></u-icon>
						<text>{{ detailsData.province }} - {{ detailsData.city }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="aptitude">
			<view class="aptitude-title">
				医院资质
			</view>
			<view class="aptitude-item" v-if="detailsData.company_info">
				<view class="aptitude-item-title">
					营业资质
				</view>
				<view class="aptitude-item-img">
					<view class="aptitude-item-img-right">
						<image class="icon-share" :src="detailsData.company_info.license_url"></image>
						<view class="aptitude-item-img-right-msg">
							<view class="title-name" v-if="detailsData.company_info.license_expire_stime">营业期限：</view>
							<view class="title-main" v-if="detailsData.company_info.license_expire_stime" style="margin-bottom: 30rpx;">
								{{ detailsData.company_info.license_expire_stime }} - {{ detailsData.company_info.license_expire_etime ? detailsData.company_info.license_expire_etime : '永久' }}
							</view>
							<view class="title-name" v-if="detailsData.company_info.license_no">统一社会编码：</view>
							<view class="title-main" v-if="detailsData.company_info.license_no">{{ detailsData.company_info.license_no }}</view>
						</view>
					</view>
					<view class="aptitude-item-img-left">
						正常
					</view>
				</view>
				<view class="aptitude-item-msg">
					<text class="title-name" v-if="detailsData.company_info.legal_person_name">法人：</text>
					<text class="title-main" v-if="detailsData.company_info.legal_person_name">{{ detailsData.company_info.legal_person_name }}</text>
					<text class="title-name" v-if="detailsData.company_info.company_address">注册地址：</text>
					<text class="title-main" v-if="detailsData.company_info.company_address">{{ detailsData.company_info.company_address }}</text>
				</view>
			</view>
			<view class="aptitude-item" v-if="detailsData.medical_info">
				<view class="aptitude-item-title">
					医疗执照
				</view>
				<view class="aptitude-item-img">
					<view class="aptitude-item-img-right">
						<image class="icon-share" :src="detailsData.medical_info.medical_license_pic"></image>
						<view class="aptitude-item-img-right-msg">
							<view class="title-name" v-if="detailsData.medical_info.license_expire_stime">证件有效期：</view>
							<view class="title-main" v-if="detailsData.medical_info.license_expire_stime">
								{{ detailsData.medical_info.license_expire_stime }} - {{ detailsData.medical_info.license_expire_etime }}
							</view>
						</view>
					</view>
					<view class="aptitude-item-img-left">
						正常
					</view>
				</view>
			</view>
			<view class="aptitude-item" v-if="detailsData.medical_info && detailsData.medical_info.special_operation_license_pic">
				<view class="aptitude-item-title">
					特殊手术资质证明
				</view>
				<view class="aptitude-item-img">
					<view class="aptitude-item-img-right">
						<image class="icon-share" :src="detailsData.medical_info.special_operation_license_pic"></image>
						<view class="aptitude-item-img-right-msg">
							<view class="title-name" v-if="detailsData.medical_info.medical_name">医疗机构许可证名称：</view>
							<view class="title-main" v-if="detailsData.medical_info.medical_name" style="margin-bottom: 30rpx;">{{ detailsData.medical_info.medical_name }}</view>
							<view class="title-name" v-if="detailsData.medical_info.medical_address">医疗机构许可证地址：</view>
							<view class="title-main" v-if="detailsData.medical_info.medical_address">{{ detailsData.medical_info.medical_address }}</view>
						</view>	
					</view>
					<view class="aptitude-item-img-left">
						正常
					</view>
				</view>
			</view>
			<view class="aptitude-item" v-if="detailsData.medical_info && detailsData.medical_info.medical_ad_license_pic">
				<view class="aptitude-item-title">
					医疗广告审查证明
				</view>
				<view class="aptitude-item-img">
					<view class="aptitude-item-img-right">
						<image class="icon-share" :src="detailsData.medical_info.medical_ad_license_pic"></image>
						<view class="aptitude-item-img-right-msg">
							<view class="title-name">医疗广告有效期：</view>
							<view class="title-main">
								{{ detailsData.medical_info.medical_ad_expire_stime }} - {{ detailsData.medical_info.medical_ad_expire_etime }}
							</view>
						</view>
					</view>
					<view class="aptitude-item-img-left">
						正常
					</view>
				</view>
			</view>
			<view class="aptitude-item" v-if="detailsData && detailsData.auth_info && detailsData.auth_info.length">
				<view class="aptitude-item-title">
					品牌授权
				</view>
				<view class="authorization">
					<view class="authorization-item" v-for="(item, index) in detailsData.auth_info">
						<view class="authorization-title">{{ item.name }}</view>
						<image class="icon-share" :src="item.pic"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMerchant } from '@/api/store.js'
	import {
		trottle
	} from '@/utils/tools';
	import {
		mapGetters
	} from 'vuex';
	import {
		strToParams
	} from '@/utils/tools'
	export default {
		data() {
			return {
				scrollTop: 0,
				percent: 0,
				goodsDetail: {
					pics: []
				},
				couponList: [],
				countTime: 0,
				id: '',
				showDownload: false,
				distribution: {},
				location: null,
				init_action: '',
				pageParams: null,
				share_extra: '',
				isFirstLoading: false,
				detailsId: null,
				detailsData: {}
			};
		},
		onLoad(options) {
			
			this.onPageScroll = trottle(this.onPageScroll, 500, this)
			this.init_action = options.action;
			this.pageParams = options;
			if (options && options.id) {
				this.detailsId = options.id;
				this.getDetails(this.detailsId)
			}

			// #ifdef H5
			if (options && options.isapp == 1) {
				this.showDownload = true;
			}
			// #endif
			if (!options.id) {
				return this.$toast({
					title: '缺少参数，无法查看商品'
				}, {
					tab: 3
				});
			} else {
				this.id = options.id;
			}
		},
		async onShow() {
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.scrollTop = scrollTop
		},
		methods: {
			async getDetails(id) {
				getMerchant({id}).then(res => {
					if (res.s == 0) {
						const receptionData = res.d.data[0]
						this.detailsData = JSON.parse(JSON.stringify(receptionData))
						if (this.detailsData.company_info) {
							this.detailsData.company_info = JSON.parse(receptionData.company_info)
						}
						if (this.detailsData.medical_info) {
							this.detailsData.medical_info = JSON.parse(receptionData.medical_info)
						}
						if (this.detailsData.auth_info) {
							this.detailsData.auth_info = JSON.parse(receptionData.auth_info)
						}
					}
				})
			},
			async getLocation() {
				const [error, res] = await uni.getLocation({
					type: 'gcj02'
				})
				if (!res) {
					// #ifdef MP-WEIXIN
					// this.getAuthorize()
					// #endif
					return
				}
				if (error) {
					return {
						lat: 0,
						lon: 0
					};
				}
				return {
					lat: res.latitude,
					lon: res.longitude
				}
			
			},
			async getAuthorize() {
				const [error, res] = await uni.showModal({
					title: '您已拒绝地理位置权限',
					content: '是否进入权限管理，调整授权？'
				});
				if (res.confirm) {
					const [error, res] = await uni.openSetting();
					if (res) this.getLocation()
				} else if (res.cancel) {
					this.$Router.go(-1)
				}
			}
		},
		async onShareAppMessage() {
			const {
				goodsDetail,
				team,
				userInfo
			} = this;

			return {
				title: goodsDetail.title,
				imageUrl: goodsDetail.pics[0],
				path: '/pages/goods_details/goods_details?id=' + this.id + "&invite_code=" + userInfo.distribution_code + (this.share_extra ? `^${this.share_extra}` : '')
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		}
	};
</script>
<style>
	page{
		background-color: #f4f4f4;
	}
</style>
<style lang="scss" scoped>
	.goods-details {
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
		background-color: rgb(246, 246, 246);
	}
	.page-top {
		position: relative;
		width: 100%;
		margin-bottom: 20rpx;
		.page-top-bgc {
			width: 100%;
			height: 400rpx;
			background-color: rgb(0, 170, 130);
		}
		.page-top-container {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			transform: translateY(-80rpx);
			.page-top-main {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				border-radius: 16rpx;
				background-color: #ffffff;
				position: relative;
				.page-top-logo {
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: absolute;
					width: 100%;
					box-sizing: border-box;
					padding: 0 20rpx;
					top: -70rpx;
					left: 0;
					.icon-share {
						width: 140rpx;
						height: 140rpx;
						border-top-right-radius: 70rpx;
						border-top-left-radius: 70rpx;
						border-bottom-left-radius: 70rpx;
						border: 6rpx solid #ffffff;
					}
					.logo-right {
						font-size: 24rpx;
						display: inline-block;
						padding: 4rpx 8rpx;
						background-color: rgb(0, 170, 130);
						color: #ffffff;
						text-align: center;
						margin-top: 60rpx;
					}
				}
				.page-top-title {
					font-size: 36rpx;
					margin-top: 80rpx;
					margin-bottom: 20rpx;
					font-weight: bold;
				}
				.title-tips {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-bottom: 20rpx;
					.title-tips-item {
						padding: 4rpx 10rpx;
						background-color: rgb(250, 250, 250);
						margin-right: 10rpx;
						color: rgb(128, 128, 128);
						font-size: 24rpx;
					}
				}
				.profile {
					color: rgb(128, 128, 128);
					font-size: 26rpx;
					margin-bottom: 20rpx;
				}
				.information {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					.information-item {
						width: 33%;
						box-sizing: border-box;
						padding: 0 10rpx;
						.information-item-top {
							text-align: center;
							color: #000000;
							margin-bottom: 10rpx;
						}
						.information-item-bottom {
							text-align: center;
							color: rgb(128, 128, 128);
						}
					}
				}
				.address-name {
					text {
						font-size: 28rpx;
					}
				}
			}
		}
		
	}
	.aptitude {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		background-color: #ffffff;
		transform: translateY(-80rpx);
		.aptitude-title {
			font-size: 36rpx;
			color: rgb(0, 170, 130);
			font-weight: bold;
		}
		.aptitude-item {
			border-bottom: 2rpx solid rgb(247, 247, 247);
			padding: 20rpx 0;
			.aptitude-item-title {
				font-size: 30rpx;
				color: #000000;
				margin-bottom: 20rpx;
				font-weight: 700;
			}
			.authorization {
				display: flex;
				overflow-x: scroll;
				.authorization-item {
					width: 160rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					margin-right: 20rpx;
					.authorization-title {
						text-align: center;
						margin-bottom: 16rpx;
					}
					.icon-share {
						width: 110rpx;
						height: 110rpx;
						border-radius: 8rpx;
						margin: 0 auto;
					}
				}
			}
			.aptitude-item-img {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				.aptitude-item-img-right {
					display: flex;
					align-items: flex-start;
					.icon-share {
						width: 180rpx;
						height: 180rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
					.aptitude-item-img-right-msg {
						.title-name {
							font-size: 26rpx;
							color: rgb(128, 128, 128);
							margin-bottom: 10rpx;
						}
						.title-main {
							font-size: 26rpx;
							color: #000000;
						}
					}
				}
				.aptitude-item-img-left {
					font-size: 24rpx;
					color: rgb(0, 170, 130);
					background-color: rgba(0, 170, 130, 0.1);
					padding: 4rpx 10rpx;
				}
			}
			.aptitude-item-msg {
				margin-top: 20rpx;
				.title-name {
					font-size: 26rpx;
					color: rgb(128, 128, 128);
					margin-bottom: 10rpx;
				}
				.title-main {
					font-size: 26rpx;
					color: #000000;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
